@import "./config.scss";
$theme1: #2a4177;
$theme2: #4ea5ea;
$theme3: #d36a6f;
$background-color-theme1: $theme1;
$background-color-theme2: $theme2;
$background-color-theme3: $theme3;
$theme1-hover-color: #001f97;
$theme2-hover-color: #181818;
$theme3-hover-color: #951114;

@mixin color() {
  [data-theme="theme1"] & {
    color: $theme1;
  }
  [data-theme="theme2"] & {
    color: $theme2;
  }
  [data-theme="theme3"] & {
    color: $theme3;
  }
  [data-theme="custom"] & {
    color: red;
  }
}

@mixin bg_color($color: #fff) {
  [data-theme="theme1"] & {
    background-color: $theme1 !important;
  }
  [data-theme="theme2"] & {
    background-color: $theme2 !important;
  }
  [data-theme="theme3"] & {
    background-color: $theme3 !important;
  }
  [data-theme="custom"] & {
    background-color: red !important;
  }
}

@mixin hover-color($color: #fff) {
  background-color: $color;
  [data-theme="theme1"] & {
    background-color: $theme1-hover-color !important;
  }
  [data-theme="theme2"] & {
    background-color: $theme2-hover-color !important;
  }
  [data-theme="theme3"] & {
    background-color: $theme3-hover-color !important;
  }
  [data-theme="custom"] & {
    background-color: $theme3-hover-color !important;
  }
}

@mixin border_color($size: 1px, $type: solid) {
  [data-theme="theme1"] & {
    border: $size $type $background-color-theme1;
  }
  [data-theme="theme2"] & {
    border: $size $type $background-color-theme2;
  }
  [data-theme="theme3"] & {
    border: $size $type $background-color-theme3;
  }
}


